<template>
  <div id="app">
    <input type="text" @keydown.enter="handleAdd" v-model="value">
    <h1>完成数据  {{ list1.length }}</h1>
    <ul>
      <li v-for="v in list1" :key="v.id">
        <input type="checkbox" v-model="v.isFinish" />
        <span>{{ v.con }}</span>
        <b @click="handleDelete(v.id)">X</b>
      </li>
    </ul>

    <h1>进行数据  {{ list2.length }}</h1>
    <ul>
      <li v-for="v in list2" :key="v.id">
        <input type="checkbox" v-model="v.isFinish" />
        <span>{{ v.con }}</span>
        <b @click="handleDelete(v.id)">X</b>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  // 计算属性
  computed: {
    list1() {
      // 获取vuex state 数据
      return this.$store.getters.list1;
    },
    list2() {
      // 获取vuex state 数据
      return this.$store.getters.list2;
    }
  },
  methods: {
    handleDelete(id) {
      // 提交 mutations  DELETE_TODOS
      this.$store.commit('DELETE_TODOS', id)
    },
    handleAdd() {
      this.$store.commit('ADD_TODOS', {
        con: this.value,
        id: new Date().getTime(),
        isFinish: false
      })

      this.value = ''
    }
  },
  data() {
    return {
      value: ''
    }
  },
  created() {
    this.$store.dispatch('FETCH_TODOS')
  }
};
</script>